<template>
	<view>
		<tn-nav-bar :isBack="true" backgroundColor="#4169E1" class="tatils">废料通网</tn-nav-bar>
		<view class="container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="recruit">
				<view class="rTop">
					<view class="title">
						{{winfo.title}}
					</view>
				</view>
				<view class="badge">
					<view class="bItem" style="font-size: 16px;">
						<text>{{winfo.cname}}</text>
					</view>
					<view class="bItem1" style="font-size: 16px;">
						<text>{{winfo.address}}</text>
					</view>
				</view>
				<view class="hr">
					<view class="hrLeft">
						<view class="hrInfo">
							<text class="hrJob" style="font-size: 16px;">{{winfo.times}}</text>
						</view>
					</view>
					<view class="right" style="font-size: 16px;">
						浏览:{{winfo.lnum}}
					</view>
				</view>
			</view>
			<view style="color: #86909C;width: 96%;margin: 0 auto;padding: 10px;">温馨提示：数据来源于网络，如有误差请以原文为主</view>
			
			<view style="padding: 10px;">
				<view style="overflow: hidden;">
					<view style="width: 10%;float: left;text-align: center;background-color: #F6994C;border-radius: 5px;color: #fff;padding: 5px 3px 5px 3px;font-size: 16px;font-weight: 600;">项目概况</view>
					<view style="padding: 5px;float: left;width: 90%;">
						<view style="height: 40px;line-height: 40px;color: #86909C;font-size: 17px;">项目保证金:{{winfo.money}}</view>
						<view style="height: 40px;line-height: 40px;color: #86909C;font-size: 17px;">项目卖方:{{winfo.xmname}}</view>
					</view>
				</view>
				<view style="overflow: hidden;margin-top: 10px;">
					<view style="width: 10%;float: left;text-align: center;background-color: #67BD84;
					border-radius: 5px;color: #fff;padding: 5px 3px 5px 3px;font-size: 16px;font-weight: 600;">联系方式</view>
					<view style="padding: 5px;float: left;width: 90%;">
						<view style="height: 40px;line-height: 40px;color: #86909C;font-size: 17px;">联系人:{{winfo.username}}</view>
						<view style="height: 40px;line-height: 40px;color: #86909C;font-size: 17px;">联系电话:{{winfo.phone}}</view>
					</view>
				</view>
				<view style="overflow: hidden;margin-top: 10px;">
					<view style="width: 10%;float: left;text-align: center;background-color: #3C7FE8;
					border-radius: 5px;color: #fff;padding: 5px 3px 5px 3px;font-size: 16px;font-weight: 600;">招标时间</view>
					<view style="padding: 5px;float: left;width: 90%;">
						<view style="height: 40px;line-height: 40px;color: #86909C;font-size: 17px;">投标开始:{{winfo.statime}}</view>
						<view style="height: 40px;line-height: 40px;color: #86909C;font-size: 17px;">投标结束:{{winfo.endtime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footerfixed dd-glass tn-padding-top-xs">
			<view style="overflow: hidden;height: 100%;">
				<view style="float: left;width: 30%;" @click="onOptionClick()">
					<view style="text-align: center;">
						<text v-if="winfo.sc==true" style="font-size: 16px;" class="tn-icon-star-fill"></text>
						<text v-if="winfo.sc==false" style="font-size: 16px;" class="tn-icon-star"></text>
					</view>
					<view style="text-align: center;">
						<text v-if="winfo.sc==true">已收藏</text>
						<text  v-if="winfo.sc==false">收藏</text>
					</view>
				</view>
				<view @click="bh(winfo.phone)" style="float: left;width: 70%;text-align: center;font-size: 19px;
				color: #fff;font-weight: 400;background-color: #3C7FE8;height: 100%;line-height: 40px;">
					<text class="tn-icon-tel" style="margin-right: 5px;"></text>打电话
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sc,
		qxsc
	} from '@/apis/index.js'
	import {
		getDetails
	} from '@/apis/zb.js'
	export default {
		data() {
			return {
				id: '',
				title: 'map',
				name: '杭州市',
				address: '杭州市拱墅区万达广场',
				latitude: 30.31968,
				longitude: 120.14209,
				covers: [{
					latitude: 30.31968,
					longitude: 120.14209,
				}],
				winfo: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetailsf(option.id)
		},
		methods: {
			onOptionClick() {
					if (this.winfo.sc == true) {
						let data = {
							uid:uni.getStorageSync('uid'),
							ids:this.id,
							types:3
						}
						qxsc(data).then(res => {
							if(res.code==200){
								this.getDetailsf(this.id)
								this.$tn.message.toast(`取消收藏成功`)
							}else{
								this.$tn.message.toast(`操作异常`)
							}
						}).catch(error => {
							this.$tn.message.toast(`操作异常`)
						})
					} else {
						let data = {
							uid:uni.getStorageSync('uid'),
							ids:this.id,
							types:3
						}
						sc(data).then(res => {
							if(res.code==200){
								this.getDetailsf(this.id)
								this.$tn.message.toast(`收藏成功`)
							}else{
								this.$tn.message.toast(`操作异常`)
							}
						}).catch(error => {
							this.$tn.message.toast(`操作异常`)
						})
					}
			},
			// 按钮点击事件
			bh(e) {
				uni.makePhoneCall({
				  phoneNumber: e // 这里填入你要拨打的电话号码
				});
			},
			getDetailsf(e) {
				let uid = uni.getStorageSync('uid')
				getDetails({
					id: e,
					uid: uid
				}).then(res => {
					console.log(res.data)
					this.winfo = res.data
					if (res.data.sc == true) {
						this.countOptions = [{
							icon: 'star-fill',
							text: '收藏',
							iconColor: '#FBBD12',
						}]
					} else {
						this.countOptions = [{
							icon: 'star',
							text: '收藏'
						}]
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			clickMap(e) {
				console.log(e);
				uni.openLocation({
					longitude: Number(this.longitude),
					latitude: Number(this.latitude),
					name: this.name,
					address: this.address
				})
			},
		}
	}
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="less" scoped>
	.tatils {
		color: #fff;
	}

	.dflex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dflexsb() {
		.dflex();
		justify-content: space-between;
	}

	.dflexsa() {
		.dflex();
		justify-content: space-around;
	}

	.container {
		height: 100%;
		width: 100%;
		font-family: PingFangSC-Semibold, PingFang SC;
		box-sizing: border-box;
		overflow-y: scroll !important;
		background: #fdfdfd;
		color: #333;
		padding-bottom: 50rpx;
		box-sizing: border-box;

		.recruit {
			width: 96%;
			margin: 0 auto;
			margin-top: 20px;
			box-shadow: 5px 5px 5px 5px rgba(232, 232, 232, 0.5);
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;

			.rTop {
				.dflexsb();
				margin: 0rpx 0rpx 30rpx 0rpx;

				.title {
					width: 100%;
					font-size: 40rpx;
					font-weight: bolder;
				}

				.money {
					font-size: 40rpx;
					flex: 1;
					color: red;
					.dflex();
				}
			}

			.badge {
				.dflex();
				justify-content: flex-start;
				flex-wrap: wrap;
				
				.bItem1 {
					margin-right: 20rpx;
					.dflex();
					justify-content: flex-start;
				
					.bIcon {
						margin-right: 6rpx;
						width: 34rpx;
						height: 34rpx;
					}
				
					text {
						color:#38a852;
						font-size: 28rpx;
						// border: 1px solid #74abf7;
						border-radius: 2px;
						padding: 3px 5px; 
						background-color: #aaff7f;
					}
				}
				.bItem {
					margin-right: 20rpx;
					.dflex();
					justify-content: flex-start;

					.bIcon {
						margin-right: 6rpx;
						width: 34rpx;
						height: 34rpx;
					}

					text {
						color:#165DFF;
						font-size: 28rpx;
						// border: 1px solid #74abf7;
						border-radius: 2px;
						padding: 3px 5px; 
						background-color: #E7F2FC;
					}
				}
			}

			.hr {
				.dflexsb();
				margin-top: 30rpx;

				.hrLeft {
					.dflex();
					justify-content: flex-start;

					.headerImg {
						margin-right: 16rpx;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					.hrInfo {
						.dflex();
						align-items: flex-start;
						flex-direction: column;

						.name {
							font-size: 24rpx;
							margin-bottom: 8rpx;
							font-weight: bolder;
						}

						.hrJob {
							font-size: 22rpx;
						}
					}
				}

				.right {
					.arrow {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}

		.bigTitle {
			margin: 30rpx 0rpx;
			font-size: 28rpx;
			font-weight: bolder;
			padding-left: 30rpx;
			box-sizing: border-box;
		}

		.jobDetail {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 50rpx;

			.jobBadge {
				.dflex();
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 4rpx;
				box-sizing: border-box;

				.jbItem {
					padding: 4rpx 10rpx;
					.dflex();
					font-size: 20rpx;
					background: #e6f3f1;
					border-radius: 12rpx;
					margin-right: 16rpx;
				}
			}

			.skill {
				width: 100%;
				margin-bottom: 6rpx;
				font-size: 26rpx;
				color: #0f1127;
				margin-top: 30rpx;

				&:first-child {
					margin-top: 30rpx !important;
				}
			}
		}

		.mapBox {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 50rpx;

			.mTop {
				.dflexsb();
				flex: 1;

				.mLeft {
					.dflex();
					justify-content: flex-start;

					.cHeader {
						width: 80rpx;
						height: 10rpx;
						border-radius: 14rpx;
						margin-right: 16rpx;
					}

					.companyInfo {
						.dflex();
						justify-content: flex-start;
						align-items: flex-start;
						flex-direction: column;

						.cDetail {
							font-size: 24rpx;
							color: #bebebe;
						}

						.cName {
							font-size: 26rpx;
							color: #0f1127;
							margin-bottom: 10rpx;
						}
					}
				}

				.mRight {
					width: 80rpx;
					.dflex();

					.arrow {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.map {
				width: 100%;
				height: 300rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;

				map {
					padding: 0 !important;
					margin: 0 !important;
					width: 100% !important;
					height: 100% !important;
					border-radius: 20rpx !important;
				}
			}
		}

		.bottom {
			border-radius: 50rpx;
			background: #fff;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.dflexsb();

			.item {
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				width: 18%;
				.dflex();
				flex-direction: column;

				.share,
				.collect {
					width: 54rpx;
					height: 54rpx;
				}

				text {
					font-size: 24rpx;
					color: #0f1127;
					margin-top: 6rpx;
				}
			}

			.talk,
			.deliver {
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				background-color: #fab31b;
				.dflex();
				color: #0f1127;

				font-size: 26rpx;
				border-radius: 40rpx;
			}

			.deliver {
				background-color: #47cfc8;
				margin-left: 12rpx;
			}
		}
	}

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 40px;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}
</style>